<template>
  <div :class="classType" ref="myFinger"></div>
</template>

<script>
export default {
  props: {
    classType: {
      type: String,
      default: "finger",
    },
  },
};
</script>

<style lang="scss" scoped>
.finger {
  animation: finger 25s linear infinite;
  position: absolute;
  top: 80px;
  left: 0;
  height: 70%;
  width: 2px;
  background-color: rgba(0, 236, 253, 0.4);
}
.finger2 {
  animation: finger2 40s linear infinite;
  position: absolute;
  top: 50px;
  left: 0;
  height: 80%;
  width: 2px;
  background-color: rgba(0, 236, 253, 0.4);
}
@keyframes finger2 {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translate(1000px);
  }

  50% {
    transform: translate(0);
  }

  75% {
    transform: translate(1000px);
  }

  100% {
    transform: translate(0);
  }
}
@keyframes finger {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translate(400px);
  }

  50% {
    transform: translate(0);
  }

  75% {
    transform: translate(400px);
  }

  100% {
    transform: translate(0);
  }
}
</style>